<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>数据平台首页主体</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/middleConter.css">
	<link rel="stylesheet" href="../../css/middleConters.css">

</head>

<body class="layui-layout-body">
	<div class="layui-body" style="background-color: #F5F6FA;">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-row headerRows">
				<div class="layui-col-md4">
					<div class="headerDiv">
						<div class="headerImgs layui-col-md3">
							<img src="../../img/datashowone.png">
						</div>
						<div class="layui-col-md8 kuai" style="height: 100px;line-height: 33px;">
							<p class="tittles">SRC-ODS</p>
							<p><span>转换</span><span style="float: right;margin-right: 10px;" class="tittle"><span id="srcTrans"></span></span></p>
							<p><span>作业</span><span style="float: right;margin-right: 10px;" class="tittle"><span id="srcTask"></span></span></p>
						</div>
					</div>
				</div>
				<div class="layui-col-md4">
					<div class="headerDiv">
						<div class="headerImgs layui-col-md3">
							<img src="../../img/datashowone.png">
						</div>
						<div class="layui-col-md8 kuai" style="height: 100px;line-height: 33px;">
							<p class="tittles">ODS-DW</p>
							<p><span>转换</span><span style="float: right;margin-right: 10px;" class="tittle"><span id="odsTrans"></span></span></p>
							<p><span>作业</span><span style="float: right;margin-right: 10px;" class="tittle"><span id="odsTask"></span></span></p>
						</div>
					</div>
				</div>
				<div class="layui-col-md4">
					<div class="headerDiv">
						<div class="headerImgs layui-col-md3">
							<img src="../../img/datashowone.png">
						</div>
						<div class="layui-col-md8 kuai" style="height: 100px;line-height: 33px;">
							<p class="tittles">DW-DM</p>
							<p><span>转换</span><span style="float: right;margin-right: 10px;" class="tittle"><span id="dwTrans"></span></span></p>
							<p><span>作业</span><span style="float: right;margin-right: 10px;" class="tittle"><span id="dwTask"></span></span></p>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space20 conterRow">
				<div class="layui-col-md12">
					<div class="layui-col-md4" style="">
						<div class="conterWarp">
							<p>
								<i class="logoImg loginImg3"></i>
								<span>整合脚本分类</span>
								<!-- <i class="layui-icon iconVertical tabWarp">
									<span class="colorNav actives" onclick="clickBtn(this,a)">按存储量</span>
									<span id="tiaozhuanxq" class="colorNav marleft" onclick="clickBtn(this)">按数据量</span>
								</i> -->
							</p>
							<div class="conterDiv">
								<div style="width: 100%;height: 100%;" id="mainGather"></div>
							</div>
						</div>
					</div>
					<div class="layui-col-md8">
						<div class="conterWarp">
							<p>
								<i  style="visibility: hidden;" class="logoImg loginImg3"></i>
								<span style="visibility: hidden;">资产分类</span>
							</p>
							<div class="conterDiv">
								<div style="width: 100%;height: 100%;" id="mainControl"></div>
							</div>
						</div>
					</div>
					<div class="layui-col-md12" style="padding-right:0px;margin-top:30px">
						<div class="conterWarp">
							<p>
								<i class="logoImg loginImg3"></i>
								<span>整合脚本创建趋势</span>
								<i class="layui-icon iconVertical tabWarp">
									<span class="colorNav" onclick="clickBtn(this)">年</span>
									<span class="colorNav marleft actives" onclick="clickBtn(this)">月</span>
									<span class="colorNav marleft" onclick="clickBtn(this)"
										style="border-left:1px solid #ccc">日</span>
								</i>
							</p>
							<div class="conterDiv">
								<div style="width: 100%;height: 100%;" id="mainMonitoring"></div>
							</div>
						</div>
					</div>
					<!-- <div class="layui-col-md6" style="margin-top:30px">
						<div class="conterWarp">
							<p>
								<i class="logoImg loginImg3"></i>
								<span>存储量分布情况</span>
							</p>
							<div class="conterDiv">
								<div style="width: 100%;height: 100%;" id="mainApi"></div>
							</div>
						</div>
					</div> -->
				</div>
				
			</div>
		</div>
	</div>
	<!--js逻辑-->
	<script src="../../js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../echarts/js/echarts.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../echarts/js/infographic.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../echarts/js/configuration.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../lib/layui/layui.js"></script>

	<script type="text/javascript">
		layui.use(['element', 'layer', 'form', 'layedit', 'jquery', 'table'], function () {
			var $ = layui.jquery;
			layer = layui.layer;
			form = layui.form;
			layedit = layui.layedit;
			element = layui.element;
			table = layui.table

			$(document).ready(function () {
				if (parent.strs) {
					var code = parent.strs[1].split('=')[1]
					parent.dynamicMenu(code)
				}
				// mainGatherObj()
				mainGatherAjax()//整合脚本分类
				//资产分类
				mainControlObj()
				//资产订阅次数前十名
				// mainQualityObj()
				//存储订阅趋势
				mainMonitoringObj()
				// 存储量分布情况
				// mainApiObj()
			});
		});
		//年度采集数-磁盘已用
		function sysCountSum(mark, type) {
			//年度采集
			var data = {
				"page": {
					"number": 1,
					"size": 1
				},
				"query": {
					"mark": mark,
					"type": type
				}
			};
			$.ajax({
				url: BASE_URL + "/dataCollection/count/sum.do",
				dataType: 'json',
				contentType: 'application/json',
				type: 'post',
				data: JSON.stringify(data),
				success: function (data) {
					if (data) {
						var TOTAL = data.TOTAL;
						$('#qnTotal').html(TOTAL);
						var $executive2 = $(".totalSum2");
						var data3 = $executive2.html();
						var data4 = formatNum(data3);
						$executive2.html(data4);
					};
				},
				error: function (data) {
					// layui.msg(data.message);
				}
			});
			//磁盘已用
			$.ajax({
				url: BASE_URL + "/dataCollection/count/getSystemDisk.do",
				dataType: 'json',
				contentType: 'application/json',
				type: 'get',
				success: function (data) {
					if (data) {
						var TS_SIZE = data.TS_SIZE;
						$('#kongJianNum').html(TS_SIZE);
						var $executive3 = $(".kongNum");
						var data5 = $executive3.html();
						var data6 = formatNum(data5);
						$executive3.html(data6);
					};
				},
				error: function (data) {
					// layui.msg(data.message);
				}
			});
		};

		function mainGatherObj() {
			$.ajax({
				url: BASE_URL + "/dataCollection/count/getDataBySystem.do",
				dataType: 'json',
				contentType: 'application/json',
				type: 'get',
				success: function (data) {
					if (data && data.length > 0) {
						var dataValue = new Array();
						for (var i = 0; i < data.length; i++) {
							var dataDetail = {};
							dataDetail.name = data[i].CATEGORY_NAME;
							dataDetail.value = initMoney(data[i].NUM);
							dataValue.push(dataDetail);
						};
						mainGatherAjax(dataValue);
					};
				},
				error: function (data) {
					// layui.msg(data.message);
				}
			});
		};
		function mainGatherAjax(dataValue) {
			var mainGather = echarts.init(document.getElementById('mainGather'), 'infographic');
			var bgColor = '#fff';
			option = {
				// title: {
				// 	text: '某站点用户访问来源',
				// 	subtext: '纯属虚构',
				// 	left: 'center'
				// },
				tooltip: {
					trigger: 'item'
				},
				// legend: {
				// 	orient: 'vertical',
				// 	left: 'left',
				// },
				legend: {
					x: 'center',
					y: 'bottom',
					// // right:'0%',
					// // left: 'center',
					icon: "circle",
					// orient: "vertical",
					// textStyle: {
					// 	color: '#e21f9d',
					// },
					data: ['转换数', '作业数']
				},
				series: [
					{
						name: '',
						type: 'pie',
						radius: '50%',
						data: [
							{ value: 1048, name: '转换数' },
							{ value: 735, name: '作业数' }
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			mainGather.setOption(option);
			window.addEventListener('resize', function () {
				mainGather.resize();
			});
		};
		//管控平台
		function mainControlObj() {
			var mainControl = echarts.init(document.getElementById('mainControl'), 'infographic');
			option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				toolbox: {

				},
				legend: {
					// data: ['转换', '作业']!!!
					x: 'center',
					y: 'bottom',
					icon: "circle",
				},
				xAxis: [
					{
						type: 'category',
						data: ['数据采集', '数据建模', '数据共享'],
						axisPointer: {
							type: 'shadow'
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						// name: '水量',
						min: 0,
						max: 10,
						interval: 2.5,
						axisLabel: {
							formatter: '{value}'
						}
					}
				],
				series: [
					{
						name: '转换',
						type: 'bar',
						data: [2.0, 4.9, 7.0]
					},
					{
						name: '作业',
						type: 'bar',
						data: [2.6, 5.9, 9.0]
					}
				]
			};
			mainControl.setOption(option);
			window.addEventListener('resize', function () {
				mainControl.resize();
			});
		};
		initError();
		function initError() {
			$.ajax({
				url: '/service/dqMeasureLog/totalPortalDqMeasureLog?type=1',
				dataType: 'json',
				type: 'get',
				async: false,
				success: function (retData) {
					//错误率
					$("#errorNum").html(retData.fail);
					var $executive2 = $(".totalSum4");
					var data3 = $executive2.html();
					var data4 = formatNum(data3);
					$executive2.html(data4);

					var fail = retData.fail;
					var total = retData.total;
					var par = ""
					if (!total) {
						par = "0.00%";
					} else {
						par = ((fail / total) * 100).toFixed(2) + "%";
					}
					$("#errorPar").html("错误率： " + par);

				}
			});
		}
		// 质量平台
		function mainQualityObj() {

			var nameData = [];
			var valueData = [];
			// $.ajax({
			//     url: '/service/dqMeasureLog/listPortalDqMeasureLog?type=1',
			//     dataType: 'json',
			//     type: 'get',
			//     async: false,
			//     success: function (retData) {
			//         if (retData) {
			//             for (var i = 0; i < retData.length; i++) {
			//                 nameData.push(retData[i].rule_name);
			//                 valueData.push(((retData[i].num) / 10000).toFixed(0));
			//             }
			//         }
			//     }
			// });


			var mainControls = echarts.init(document.getElementById('mainControls'), 'infographic');
			option = {
				title: {
					text: '-订阅次数',
					left: 'center',
					bottom: "0",
					textStyle: {//标题内容的样式
						color: '#2667DF',//京东红
						fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
						fontWeight: "lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
						fontFamily: "san-serif",//主题文字字体，默认微软雅黑
						fontSize: 14//主题文字字体大小，默认为18px
					}
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01]
				},
				yAxis: {
					type: 'category',
					data: ['一般公共预算支出', '国有资本经营预算收入', '社保基金预算收入', '政府性基金预算收入', '一般公共预算收入', '地方政府收入', '财政总收入']
				},
				series: [
					{
						name: '2021年',
						type: 'bar',
						data: [16, 23, 98, 25, 28, 29, 30]
					}
				]
			};
			mainControls.setOption(option);
			window.addEventListener('resize', function () {
				mainControls.resize();
			});
		};
		//存储量趋势图
		function mainMonitoringObj() {
			var mainMonitoring = echarts.init(document.getElementById('mainMonitoring'), 'infographic');

			option = {
				// title: {
				// 	text: '-资产数量',
				// 	left: 'center',
				// 	bottom: "-6px",
				// 	textStyle: {//标题内容的样式
				// 		color: '#2667DF',//京东红
				// 		fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
				// 		fontWeight: "lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
				// 		fontFamily: "san-serif",//主题文字字体，默认微软雅黑
				// 		fontSize: 14//主题文字字体大小，默认为18px
				// 	}
				// },
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					// data: ['资产数量']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['01', '02', '03', '04', '05', '06', '07']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '转换',
						type: 'line',
						stack: '总量',
						symbol: 'circle',     //设定为实心点
						symbolSize: 10,   //设定实心点的大小
						data: [820, 932, 901, 934, 1290, 1330, 1320]
					},
					{
						name: '作业',
						type: 'line',
						stack: '总量',
						symbol: 'circle',     //设定为实心点
						symbolSize: 10,   //设定实心点的大小
						data: [820, 932, 901, 934, 1290, 1330, 1320]
					}
				]
			};

			mainMonitoring.setOption(option);
			window.addEventListener('resize', function () {
				mainMonitoring.resize();
			});
		};
		// 存储量分布情况
		function mainApiObj() {
			var mainApi = echarts.init(document.getElementById('mainApi'), 'infographic');
			option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {            // 坐标轴指示器，坐标轴触发有效
						type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021'],
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '直接访问',
						type: 'bar',
						barWidth: '60%',
						data: [10, 52, 200, 334, 390, 330, 220]
					}
				]
			};
			mainApi.setOption(option);
			window.addEventListener('resize', function () {
				mainApi.resize();
			});
		};
		//数据应用平台
		function mainUseFun() {
			$.ajax({
				url: BASE_URL + "/dataCollection/count/getLastSevenDaysNum.do",
				dataType: 'json',
				contentType: 'application/json',
				type: 'get',
				success: function (data) {
					if (data && data.length > 0) {
						var dataValue1 = [];
						var dataValue2 = [];
						for (var i = 0; i < data.length; i++) {
							//最近七天采集数
							var DAY = data[i].DAY;
							var DATA_NUM = initMoney(data[i].DATA_NUM);
							dataValue1.push(DAY);
							dataValue2.push(DATA_NUM);
						};
						var lengNum = data.length;
						//昨日采集数
						var num1 = data[lengNum - 2].DATA_NUM;
						var num2 = data[lengNum - 3].DATA_NUM;
						var num3 = num1 - num2;
						$('#zrTotal').html(num3);
						var $executive3 = $(".totalSum3");
						var data5 = $executive3.html();
						var data6 = formatNum(data5);
						$executive3.html(data6);
						//今日采集数
						var number1 = data[lengNum - 1].DATA_NUM;
						var number2 = data[lengNum - 2].DATA_NUM;
						var number3 = number1 - number2;
						if (number3 >= 0) {
							$('#jrTotal').html(number3);
							var $executive1 = $(".totalSum1");
							var data1 = $executive1.html();
							var data2 = formatNum(data1);
							$executive1.html(data2);
						} else {
							$.ajax({
								url: BASE_URL + "/dataCollection/count/getTodayNum.do",
								dataType: 'json',
								contentType: 'application/json',
								type: 'get',
								success: function (data) {
									var TODAY_NUM = data.TODAY_NUM;
									$('#jrTotal').html(TODAY_NUM);
									var $executive1 = $(".totalSum1");
									var data1 = $executive1.html();
									var data2 = formatNum(data1);
									$executive1.html(data2);
								},
								error: function (data) {
									// layui.msg(data.message);
								}
							});
						};
						//最近七天采集情况
						mainUseAjax(dataValue1, dataValue2);
					};
				},
				error: function (data) {
					// layui.msg(data.message);
				}
			});
		};
		function mainUseAjax(dataValue1, dataValue2) {
			var mainUse = echarts.init(document.getElementById('mainUse'), 'infographic');
			option = {
				backgroundColor: '',
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					top: '12%',
					left: '10%',
					right: '1%',
					bottom: '10%',
					// containLabel: true
				},
				xAxis: [{
					type: 'category',
					axisLine: {
						show: true
					},
					splitArea: {
						// show: true,
						color: '#f00',
						lineStyle: {
							color: '#f00'
						},
					},
					axisLabel: {
						interval: -1,
						textStyle: {
							color: '#000000',
							margin: 0,
						},
						rotate: 15
					},
					splitLine: {
						show: false
					},
					boundaryGap: true,
					data: dataValue1,

				}],
				yAxis: [{
					name: '单位:万条',
					type: 'value',
					// min: 0,
					// max: 140,
					splitNumber: 4,
					axisLabel: {
						show: true,
						textStyle: {
							color: '#000000',

						},
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: 'rgba(0,0,0,1)'
						}
					},
					splitLine: {
						lineStyle: {
							color: 'rgba(0,0,0,0.12)'
						}
					},
					axisTick: {
						show: true,
					}
				}],
				series: [{
					name: '采集情况',
					type: 'line',
					smooth: false, //是否平滑
					showAllSymbol: true,
					// symbol: 'image://./static/images/guang-circle.png',
					symbol: 'circle',
					symbolSize: 5,
					lineStyle: {
						normal: {
							color: "#6c50f3",
							shadowColor: 'rgba(0, 0, 0, .3)',
							shadowBlur: 0,
							shadowOffsetY: 0,
							shadowOffsetX: 0,
						},
					},
					itemStyle: {
						color: "#6c50f3",
						borderColor: "#6c50f3",
						borderWidth: 3,
						shadowColor: 'rgba(0, 0, 0, .3)',
						shadowBlur: 0,
						shadowOffsetY: 0,
						shadowOffsetX: 0,
					},
					tooltip: {
						show: true
					},
					data: dataValue2
				}
				]
			};
			mainUse.setOption(option);
			window.addEventListener('resize', function () {
				mainUse.resize();
			});
		};

		function parseFormatNum(number, n) {

			if (n != 0) {
				n = (n > 0 && n <= 20) ? n : 2;
			}
			number = parseFloat((number + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
			var sub_val = number.split(".")[0].split("").reverse();
			var sub_xs = number.split(".")[1];
			var show_html = "";
			for (i = 0; i < sub_val.length; i++) {
				show_html += sub_val[i] + ((i + 1) % 3 == 0 && (i + 1) != sub_val.length ? "," : "");
			}
			if (n == 0) {
				return show_html.split("").reverse().join("");
			} else {
				return show_html.split("").reverse().join("") + "." + sub_xs;
			}
		};
		function clickBtn($this, $chuancan) {
			$($this).siblings('span').removeClass('actives') // 删除其他兄弟元素的样式
			$($this).addClass('actives'); // 添加当前元素的样式
			//点击 按钮（按存储量、按数据量）传不同的参数掉接口获取数据
			var parms = ''
			gatData(parms)
		}
		function gatData(parms) {
			// $.ajax({
			//     url: BASE_URL + "/dataCollection/count/sum.do",
			//     dataType: 'json',
			//     contentType: 'application/json',
			//     type: 'post',
			//     data: JSON.stringify(parms),
			//     success: function (data) {
			//         if (data) {

			//         };
			//     },
			//     error: function (data) {
			//     }
			// });
		}
	</script>
</body>

</html>